import "./culturalAuditorium.scss"
import React, { useState } from "react";

import { Breadcrumb, Layout, Menu, Space, Button, Input, DatePicker, Divider, List, Form } from 'antd';
import moment from 'moment';
const dateFormat = 'YYYY/MM/DD';
const { Search } = Input;
const { RangePicker } = DatePicker;



let data = [
    '歌曲：张杰-如果爱；播放量：4w+',
    '歌曲：周杰伦&潘儿-夜的第七章；播放量：8w+',
    '歌曲：周杰伦-菊花台；播放量：5w+',
    '歌曲：林允儿-月亮代表我的心；播放量：12w+',
    '歌曲：陈奕迅-红玫瑰；播放量：7w+',
    '歌曲：陈奕迅 + 王菲-因为爱情；播放量：6w+',
    '歌曲：G.E.M.邓紫棋-夜空中最亮的星；播放量：6w+',
    '歌曲：华晨宇 + 杨宗纬-国王与乞丐；播放量：5w+',
];

let dataZ = [
    '歌曲：周杰伦&潘儿-夜的第七章；播放量：6w+',
    '歌曲：周杰伦-菊花台；播放量：5w+',
    '歌曲：周杰伦-七里香；播放量：8w+',
    '歌曲：周杰伦-晴天；播放量：5w+',
    '歌曲：周杰伦-红尘客栈；播放量：3w+',
    '歌曲：周杰伦-开不了口；播放量：5w+',
    '歌曲：周杰伦-牛仔很忙；播放量：12w+',
    '歌曲：周杰伦-听妈妈的话；播放量：22w+',

];

export default () => {

    const [songdata, setSongdata] = useState(data)

    const onFinish = (val) => {
        setSongdata(dataZ)
    }
    const setNew = () => {
        setSongdata(data)
    }
    const reset = (val) => {
        val = null
    }
    return (
        <div>
            <div>

                <header className="cultureTop">
                    <div>
                        每日播放量统计：
                        <DatePicker defaultValue={moment('2022/11/03', dateFormat)} format={dateFormat} />
                    </div>
                    <div className="cultureInput">
                        <Form name="basic" onFinish={onFinish} layout="inline">
                            <span>歌曲播放量查询：</span>
                            <Form.Item>
                                <Input className="cultureInput" placeholder="请输入歌名查询" />
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" size={"large"} className="cultureButton">
                                    搜索
                                </Button>
                                <Button className="cultureButton" type="primary" size={"large"} onClick={reset}>重置</Button>
                                <Button className="cultureButton" type="primary" size={"large"} onClick={setNew}>
                                    刷新
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </header>
                <div>
                    <List
                        size="large"
                        bordered
                        dataSource={songdata}
                        renderItem={(item) => <List.Item>{item}</List.Item>}
                    />

                </div>

            </div>
        </div >
    )
}